<template>
    <div class="owner">
        <div class="container">
            <!-- 用户信息头部 -->
            <div class="user-header">
                <div class="avatar-container" @click="triggerFileInput">
                    <img :src="avatarUrl" alt="用户头像" class="avatar" />
                    <div class="avatar-overlay">
                        <i class="fas fa-camera"></i>
                    </div>
                </div>
                <p class="upload-hint">点击头像上传新照片</p>
                <h2 class="username">{{ userName }}</h2>
                <router-link to="/profileLink">
                    <button class="profileLink">编辑个人资料</button>
                    </router-link>
            </div>

            <!-- 用户信息区域 -->
            <div class="user-info-section">
                <p class="user-bio">{{ userBio || '用户什么也没留下~' }}</p>

                <ul class="stats-grid">
                    <li class="stat-item" v-for="(stat, index) in userStats" :key="index">
                        <span class="stat-label">{{ stat.label }}</span>
                        <span class="stat-value">{{ stat.value }}</span>
                    </li>
                </ul>
            </div>

            <!-- 广告区域 -->
            <div class="ad-section" v-if="ads.length > 0">
                <h3 class="section-title">推荐内容</h3>
                <ul class="ad-grid">
                    <li v-for="(ad, index) in ads" :key="index" class="ad-item">
                        <router-link :to="ad.link">
                            <img :src="ad.image" :alt="ad.title" class="ad-image" />
                            <div class="ad-info">
                                <h4>{{ ad.title }}</h4>
                                <p>{{ ad.description }}</p>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </div>

            <!-- 浏览记录 -->
            <div class="history-section">
                <h3 class="section-title">浏览记录</h3>
                <ImageText :information="historyData" />
            </div>

            <!-- 通知组件 -->
            <transition name="fade">
                <div class="notification" :class="{ 'error': isError }" v-if="showNotification">
                    <i :class="['icon', isError ? 'fa-exclamation-circle' : 'fa-check-circle']"></i>
                    <span>{{ notificationMessage }}</span>
                </div>
            </transition>

            <!-- 隐藏的文件输入 -->
            <input type="file" ref="fileInput" accept="image/*" style="display: none" @change="handleFileUpload" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import ImageText from '../../components/ImgText.vue';
import defaultAvatar from '../../assets/img/photo.png';

// 用户数据
const userName = ref('用户昵称');
const userBio = ref('');
const avatarUrl = ref(defaultAvatar);
const isLoading = ref(false);

//从localstorage中获取数据 
onMounted(()=>{
    userName.value = JSON.parse(localStorage.getItem("profileData"))?.name || {};
    userBio.value = JSON.parse(localStorage.getItem("profileData"))?.message || {};
})

// 用户统计信息
const userStats = ref([
    { label: '关注', value: 0 },
    { label: '评论', value: 0 },
    { label: '收藏', value: 0 },
    { label: '获赞', value: 0 }
]);

// 广告数据
const ads = ref([
    {
        title: '广告1',
        description: '广告描述1',
        image: 'https://example.com/ad1.jpg',
        link: '/ad/1'
    },
    // 更多广告...
]);

// 历史记录数据
const historyData = ref({
    url: 'http://localhost:3000/TokyoSpots/',
    title: '浏览记录',
    items: [] // 实际项目中可以从API获取
});

// 通知系统
const showNotification = ref(false);
const notificationMessage = ref('');
const isError = ref(false);

// 触发文件选择
const triggerFileInput = () => {
    const fileInput = document.querySelector('input[type="file"]');
    if (fileInput) fileInput.click();
};

// 处理文件上传
const handleFileUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    // 验证文件
    const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
    const maxSize = 2 * 1024 * 1024; // 2MB

    if (!validTypes.includes(file.type)) {
        showMessage('请上传有效的图片文件 (JPEG, PNG, GIF)', true);
        return;
    }

    if (file.size > maxSize) {
        showMessage('图片大小不能超过2MB', true);
        return;
    }

    try {
        isLoading.value = true;
        // 这里应该是实际的上传逻辑
        const imageUrl = await uploadImage(file);
        avatarUrl.value = imageUrl;
        showMessage('头像上传成功');
    } catch (error) {
        console.error('上传失败:', error);
        showMessage('头像上传失败', true);
    } finally {
        isLoading.value = false;
        event.target.value = ''; // 清除输入，允许重复选择同一文件
    }
};

// 模拟上传函数
const uploadImage = (file) => {
    return new Promise((resolve) => {
        // 实际项目中这里应该是API调用
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.readAsDataURL(file);
    });
};

// 显示通知消息
const showMessage = (message, error = false) => {
    notificationMessage.value = message;
    isError.value = error;
    showNotification.value = true;

    setTimeout(() => {
        showNotification.value = false;
    }, 3000);
};

</script>

<style lang="css" scoped>
.owner {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    background: linear-gradient(rgba(255, 244, 244, 0.9), rgba(255, 255, 255, 0.8)),
        url('../../assets/img/photo.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.container {
    background-color: rgba(255, 249, 241, 0.9);
    border-radius: 16px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(183, 154, 154, 0.1);
    backdrop-filter: blur(5px);
}

.user-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.avatar-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;

    &:hover {
        transform: scale(1.05);
    }
}

.profileLink{
    width: 180px;
    height: 45px;
    background: linear-gradient(135deg, #e0fde1, #81C784);
    font-size: 20px;
    border-radius: 20px;
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;

    .avatar-container:hover & {
        opacity: 1;
    }

    .fa-camera {
        color: white;
        font-size: 24px;
    }
}

.upload-hint {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}

.username {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.user-info-section {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.user-bio {
    color: #555;
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(245, 245, 245, 0.7);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 0;
    list-style: none;
}

.stat-item {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.stat-label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.section-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.ad-section {
    margin-bottom: 30px;
}

.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.ad-item {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    &:hover {
        transform: translateY(-5px);
    }

    a {
        text-decoration: none;
        color: inherit;
    }
}

.ad-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.ad-info {
    padding: 15px;

    h4 {
        margin: 0 0 5px;
        font-size: 16px;
        color: #333;
    }

    p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }
}

.notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 25px;
    border-radius: 8px;
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;

    &.error {
        background-color: #f44336;
    }

    .icon {
        margin-right: 10px;
        font-size: 20px;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>